<script setup lang="ts">
import { Router } from "@/utils/router";
import { onLoad } from "@dcloudio/uni-app";
import { reactive, provide, ref } from "vue";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import TalkItem from "@/package/my-collect-favor/pages/components/talk-item.vue";
import {
  get_favorite,
  get_favorite_type,
} from "@/package/my-collect-favor/api/index";
import ScrollList from "@/components/list/scroll-list.vue";
onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {});
});
const { onShareAppMessage, onShareTimeline, shareOption } = useShare("");
const props = defineProps<{ id: number }>();
const searchForm = ref({
  type: 0,
});
const activeIndex = ref(0);
const activeClick = (num: number) => {
  if (activeIndex.value == num) return;
  activeIndex.value = num;
  searchForm.value.type = num;
  scrollListRef.value?.getList();
};

const scrollListRef = ref<typeof ScrollList>();
const listShow = ref(false);

const typeList = ref<any>([]);
const getTypeList = () => {
  get_favorite_type().then((res) => {
    typeList.value = res;
    searchForm.value.type = typeList.value[0].id;
    activeIndex.value = typeList.value[0].id;
    listShow.value = true;
  });
};
getTypeList();
</script>

<template>
  <view class="tabWrap">
    <view class="tabWrap1">
      <view
         @click="activeClick(item.id)"
        v-for="(item, index) in typeList"
        :key="index"
        class="tabItem"
        :class="activeIndex == item.id ? 'active' : ''"
     
        >{{ item.name }}</view
      >
    </view>
  </view>
  <view class="content">
    <ScrollList
      ref="scrollListRef"
      v-if="listShow"
      :api="get_favorite"
      :query="searchForm"
      pageSize="10"
      @getList="getList"
    >
      <template #default="{ list }">
        <TalkItem v-for="item in list" :key="item.id" :data="item" :type="activeIndex" />
      </template>
    </ScrollList>
  </view>
</template>

<style lang="scss">
@import "/src/styles/mixins.scss";
.tabWrap {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80rpx;
  background-color: #fff;
  border-top: 2rpx solid #f1f1f1;
  @include center();
  .tabWrap1 {
    width: 60%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tabItem {
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    width: 150rpx;
    text-align: center;
  }
  .active {
    font-weight: bold;
    color: #333333 !important;
  }
}
.content {
  width: 100%;
  overflow: hidden;
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 100rpx 20rpx 20rpx 20rpx;
}
</style>
